<!--
 * @Date: 2023-11-17 15:19:49
 * @LastEditTime: 2023-12-02 17:20:01
 * @Description: content
-->
<template>
  <view class="content">
    <uni-nav-bar
      title="权益中心"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <view
      class="hd-card c_bg"
      :style="{
        backgroundImage: `url(${$img('/static/img2/cc152.png')})`
      }"
    >
      <view class="user-info">
        <view class="avatar">
          <image :src="pageData && pageData.user_img" lazy-load></image>
        </view>

        <view class="user-r">
          <view class="lv-rule">
            <view class="lv">
              {{ (pageData && pageData.quan_yi_level.title) || '-' }}
            </view>

            <view
              class="rule-btn"
              @click="$refs.rulePop.getRule(20, '权益说明')"
            >
              <image :src="$img('/static/img2/cc153.png')" lazy-load></image>
            </view>
          </view>

          <view class="pro-box">
            <view class="pro-l">
              <view v-if="pageData" class="pro-num">
                <template v-if="pageData.quan_yi_level.cha >= 0">
                  差{{ pageData.quan_yi_level.cha }}欧气值升级
                </template>
                <template v-else-if="pageData.quan_yi_level.cha == -1">
                  已满级
                </template>
              </view>

              <view class="pro">
                <cmd-progress
                  :percent="(pageData && pageData.quan_yi_level.jindu) || 0"
                  :show-info="false"
                  stroke-color=" linear-gradient(90deg, #E40D1D 0%, #E4690D 100%)"
                  :strokeWidth="10"
                ></cmd-progress>
              </view>
            </view>

            <view
              class="pro-r"
              @click="$c.to({ type: 3, url: '/pages/shouye/index' })"
            >
              <image :src="$img('/static/img2/cc154.png')" lazy-load></image>
            </view>
          </view>
        </view>
      </view>

      <!-- <view
        v-if="pageData"
        class="user-card common_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img/2_qy_card.png')})`
        }"
      >
        <view class="avatar">
          <image :src="pageData.user_img" lazy-load></image>
        </view>

        <view class="lv">{{ pageData.quan_yi_level.title }}</view>

        <view class="need">
          <template v-if="pageData.quan_yi_level.cha >= 0">
            差{{ pageData.quan_yi_level.cha }}欧气值升级
          </template>
          <template v-else-if="pageData.quan_yi_level.cha == -1">
            已满级
          </template>
        </view>

        <view class="progress-buy">
          <view class="progress">
            <cmd-progress
              :percent="pageData.quan_yi_level.jindu"
              :show-info="false"
              stroke-color=" linear-gradient(90deg, #2DCBFF 0%, #FF95FB 100%)"
              :strokeWidth="5"
            ></cmd-progress>
          </view>

          <view
            class="buy"
            @click="$c.to({ type: 3, url: '/pages/shouye/index' })"
          >
            <text>去购买</text>
          </view>
        </view>

        <view class="rule-btn" @click="toRule">
          <view class="icon">
            <image :src="$img('/static/img/info.png')" lazy-load></image>
          </view>

          说明
        </view>
      </view> -->

      <view v-if="pageData" class="prize-card">
        <view class="prize-item out">
          <view class="lv">等级</view>

          <view class="prize">
            <view class="l-title">普通</view>
            <view class="l-title">奖励</view>
          </view>

          <view class="prize">
            <view class="l-title">高级</view>
            <view class="l-title">奖励</view>
          </view>

          <view class="btn-box"></view>
        </view>

        <scroll-view class="prize-list" scroll-x :scroll-into-view="curLvId">
          <view
            class="prize-item"
            v-for="(item, i) in pageData.level_list"
            :key="i"
            :id="`prize-item${item.level}`"
            :class="[
              {
                act: pageData.quan_yi_level.level == item.level
              }
            ]"
          >
            <view class="lv">{{ item.level }}级</view>

            <view class="prize" @click="preview(item)">
              <view class="pic">
                <image :src="$img('/static/img2/cc155.png')" lazy-load></image>
              </view>
            </view>

            <view class="prize" @click="preview(item)">
              <view class="pic">
                <image :src="$img('/static/img2/cc156.png')" lazy-load></image>
              </view>
            </view>

            <view class="btn-box">
              <view
                v-if="item.is_ling == 1"
                class="get-btn"
                @click="doReceive(item)"
              >
                领取
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <view class="task">
      <view class="task-tab">
        <view
          class="task-tab-item"
          v-for="(item, i) in tabList"
          :key="i"
          :class="{
            act: tabCur == i
          }"
          @click="tabChange(i)"
        >
          {{ item.title }}
        </view>
      </view>

      <view class="task-item" v-for="(item, i) in taskList" :key="i">
        <view class="task-l">
          <view class="title">{{ item.title }}</view>

          <view class="num">积分+{{ item.z_number }}</view>

          <view class="progress">
            <view class="progress-inner">
              <cmd-progress
                :percent="item.percentage"
                :show-info="false"
                stroke-color=" linear-gradient(90deg, #E4690D 0%, #E40D1D 100%)"
                :strokeWidth="5"
              ></cmd-progress>
            </view>

            {{ item.ywc_count }}/{{ item.number }}
          </view>
        </view>

        <view class="task-r">
          <view
            v-if="item.is_complete == 0"
            class="btn c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc120.png')})`
            }"
            @click="taskTo(item)"
          >
            <text>去完成</text>
          </view>

          <view
            v-if="item.is_complete == 1"
            class="btn c_bg act"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc120.png')})`
            }"
            @click="completeTask(item)"
          >
            <text>待领取</text>
          </view>

          <view
            v-if="item.is_complete == 2"
            class="btn c_bg"
            :style="{
              backgroundImage: `url(${$img('/static/img2/cc120.png')})`
            }"
          >
            <text>已领取</text>
          </view>
        </view>
      </view>
    </view>

    <uni-popup
      ref="detailPop"
      type="center"
      mask-background-color="rgba(0,0,0,0.9)"
    >
      <view
        v-if="previewData"
        class="detail-pop common_bg"
        :style="{
          backgroundImage: `url(${$img('/static/img2/cc157.png')})`
        }"
      >
        <view class="title">{{ previewData.level }}级普通奖励</view>

        <view class="prize-desc">
          <view>只有等级达到了当前等级，方可领取下方奖励哦~</view>

          <view>每一级奖励只可领取一次，领取后请在有效期内使用!</view>
        </view>

        <scroll-view class="jiang-list" scroll-x>
          <view
            class="jiang-item"
            v-for="(item, i) in previewData.pu_jiang"
            :key="i"
          >
            <view class="pic">
              <image
                :src="$img('/static/img/4_qy_prize1.png')"
                lazy-load
              ></image>

              <view v-if="item.z_num" class="num">×{{ item.z_num }}</view>
            </view>

            <view class="item-title hang1">{{ item.title }}</view>
          </view>
        </scroll-view>

        <!-- <view class="border"></view> -->

        <view
          class="title act common_bg"
          :style="{
            backgroundImage: `url(${$img('/static/img/2_gj_border.png')})`
          }"
        >
          <text>{{ previewData.level }}级高级奖励</text>
        </view>

        <view class="prize-desc">
          <view>完成任务后您将从以下奖品中随机获得一件</view>
        </view>

        <scroll-view class="jiang-list" scroll-x>
          <view
            class="jiang-item"
            v-for="(item, i) in previewData.gao_jiang"
            :key="i"
          >
            <view class="pic">
              <image :src="item.imgurl" lazy-load></image>

              <view v-if="item.z_num" class="num">×{{ item.z_num }}</view>
            </view>

            <view class="item-title hang1">{{ item.title }}</view>
          </view>
        </scroll-view>

        <view class="close icon" @click="$refs.detailPop.close()">
          <image :src="$img('/static/img2/cc158.png')" lazy-load></image>
        </view>
      </view>
    </uni-popup>

    <uni-popup
      ref="resPop"
      type="center"
      mask-background-color="rgba(0,0,0,0.8)"
    >
      <view class="res-pop">
        <view class="suc-list">
          <view class="suc-title">
            <image :src="$img('/static/img2/cc66.png')" lazy-load></image>
          </view>

          <scroll-view class="list-wrap" scroll-y>
            <view
              class="list-item common_bg"
              v-for="(item, i) in prizeRes"
              :key="i"
              :style="{
                backgroundImage: `url(${$img('/static/img2/cc149.png')})`
              }"
            >
              <template v-if="item.type == 1">
                <view class="money">
                  ¥
                  <text>{{ item.jian_price }}</text>
                </view>

                <view class="info">
                  <view class="title">{{ item.title }}</view>

                  <view class="time">{{ item.end_time }}到期</view>
                </view>

                <view
                  class="btn c_bg"
                  :style="{
                    backgroundImage: `url(${$img('/static/img2/cc150.png')})`
                  }"
                  @click="$c.to({ type: 3, url: '/pages/shouye/index' })"
                >
                  <!-- 去使用 -->
                </view>
              </template>

              <template v-else>
                <view class="pic">
                  <image :src="item.imgurl" lazy-load></image>
                </view>

                <view class="info">
                  <view class="title hang1">
                    {{ item.title }}
                  </view>
                </view>
              </template>
            </view>
            <!-- <view
              class="list-item common_bg"
              :style="{
                backgroundImage: `url(${$img('/static/img/2_coupon_bg.png')})`
              }"
            >
              <view class="pic">
                <image :src="$img('/static/zzz.png')" lazy-load></image>
              </view>

              <view class="info">
                <view class="title hang1">
                  {{
                    '正正正正正正正正正正正正正正正正正正正正正正正正正正正正正正'
                  }}
                </view>
              </view>
            </view> -->
          </scroll-view>
        </view>

        <view class="close icon" @click="$refs.resPop.close()">
          <image :src="$img('/static/img2/cc124.png')" lazy-load></image>
        </view>
      </view>
    </uni-popup>

    <rule-pop ref="rulePop"></rule-pop>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabList: [
        {
          id: 1,
          title: '每日任务'
        },
        {
          id: 2,
          title: '每周任务'
        }
      ],
      tabCur: 0,
      pageData: '',
      taskList: [],
      curLvId: '',
      previewData: '',
      prizeRes: ''
    }
  },

  onLoad(options) {
    // this.getUserInfo()
    this.getData()
  },

  onShow() {
    this.tabChange(this.tabCur)
  },

  onReady() {
    // this.$refs.detailPop.open()
    // this.prizeRes = [
    //   {
    //     type: 1,
    //     jian_price: 233,
    //     title: '正正正正正正正',
    //     end_time: '2333-23-23 23:23:23'
    //   },
    //   {
    //     type: 2,
    //     imgurl: this.$img('/static/zzz.png'),
    //     title: '正正正正正正正'
    //   }
    // ]
    // this.$refs.resPop.open()
  },

  methods: {
    /**
     * 任务跳转
     */
    taskTo(item) {
      if (!item.pages) {
        return
      }

      this.$c.to({
        url: item.pages,
        fail: () => {
          this.$c.to({
            type: 3,
            url: item.pages
          })
        }
      })
    },

    toRule() {
      uni.setStorageSync('_qy_rule', this.pageData.danye_list)

      this.$c.to({
        url: '/package/mine/qy-rule'
      })
    },

    preview(item) {
      this.previewData = item
      this.$refs.detailPop.open()
    },

    doReceive(item) {
      this.req({
        url: 'quan_yi_ling',
        data: {
          id: item.id
        },
        success: res => {
          if (res.status == 1) {
            this.prizeRes = res.data

            this.$refs.resPop.open()

            this.getData()
          }
        }
      })
    },

    completeTask(item) {
      this.req({
        url: 'ling_task',
        data: {
          task_list_id: item.id
        },
        success: res => {
          if (res.status == 1) {
            this.$c.toast({
              title: res.msg,
              duration: 500,
              success: () => {
                this.getData()
                this.tabChange(this.tabCur)
              }
            })
          }
        }
      })
    },

    getTask() {
      this.req({
        url: 'task_list',
        data: {
          type: this.tabList[this.tabCur].id
        },
        success: res => {
          if (res.status == 1) {
            this.taskList = res.data.task_list
          }
        }
      })
    },

    getData() {
      this.req({
        url: 'quan_yi',
        data: {},
        Loading: true,
        success: res => {
          if (res.status == 1) {
            const can_ling_item = res.data.level_list.find(
              item => item.is_ling == 1
            )
            if (can_ling_item) {
              this.curLvId = `prize-item${can_ling_item.level}`
            }

            this.pageData = res.data
          }
        }
      })
    },

    getUserInfo() {
      this.req({
        url: 'user',
        data: {},
        Loading: true,
        success: res => {
          if (res.status == 1) {
            this.userInfo = res.data.userinfo
          }
        }
      })
    },

    tabChange(i) {
      this.tabCur = i

      this.getTask()
    }
  }
}
</script>

<style lang="scss">
.content {
  padding-bottom: 30rpx;

  image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }

  .hd-card {
    margin: 40rpx auto 0;
    width: 690rpx;
    box-sizing: border-box;
    padding: 40rpx 40rpx 30rpx;

    .user-info {
      display: flex;
      align-items: center;

      .avatar {
        width: 132rpx;
        height: 132rpx;
        border: 4rpx solid #000000;
        box-sizing: border-box;
        border-radius: 50%;
      }

      .user-r {
        flex: 1;
        padding-left: 12rpx;

        .lv-rule {
          display: flex;
          align-items: center;

          .lv {
            flex: 1;
            padding-right: 20rpx;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #ffffff;
          }

          .rule-btn {
            width: 104rpx;
            height: 28rpx;
          }
        }

        .pro-box {
          padding: 10rpx 0 0;
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .pro-l {
            width: 350rpx;

            .pro-num {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 20rpx;
              color: #ffffff;
            }

            .pro {
              padding: 8rpx 0 0;

              /deep/.cmd-progress-inner {
                background: #333333;
              }
            }
          }

          .pro-r {
            width: 104rpx;
            height: 40rpx;
          }
        }
      }
    }

    // .user-card {
    //   width: 710rpx;
    //   height: 280rpx;
    //   box-sizing: border-box;
    //   padding: 1rpx 40rpx 0;
    //   position: relative;
    //

    //   .avatar {
    //     margin-left: 30rpx;
    //     margin-top: -40rpx;

    //     width: 100rpx;
    //     height: 100rpx;
    //     background: #9d9d9d;
    //     border: 1px solid #cccccc;
    //     border-radius: 50%;
    //     overflow: hidden;
    //

    //     image {
    //       width: 100%;
    //       height: 100%;
    //     }   }

    //   .lv {
    //     margin-top: 20rpx;

    //     font-size: 36rpx;
    //     font-family: Source Han Sans CN;
    //     font-weight: 400;
    //     color: #ffffff;
    //   }

    //   .need {
    //     margin-top: 10rpx;

    //     font-size: 24rpx;
    //     font-family: Source Han Sans CN;
    //     font-weight: 400;
    //     color: #cccccc;
    //   }

    //   .progress-buy {
    //     display: flex;
    //     justify-content: space-between;
    //     align-items: center;
    //

    //     .progress {
    //       width: 430rpx;
    //

    //       /deep/.cmd-progress-inner {
    //         background: rgba(255, 255, 255, 0.2);
    //       }     }

    //     .buy {
    //       width: 150rpx;
    //       height: 60rpx;
    //       display: flex;
    //       justify-content: center;
    //       align-items: center;
    //       border: 1px solid transparent;
    //       border-radius: 30rpx;
    //       background-clip: padding-box, border-box;
    //       background-origin: padding-box, border-box;
    //       background-image: linear-gradient(to right, #0a060f, #0a060f),
    //         linear-gradient(90deg, #6adeff, #7ab5ff, #ff7feb);
    //

    //       text {
    //         font-size: 28rpx;
    //         font-family: Source Han Sans CN;
    //         font-weight: 400;
    //         color: transparent;

    //         background: linear-gradient(
    //           90deg,
    //           #6adeff 0%,
    //           #7ab5ff 50%,
    //           #ff7feb 100%
    //         );
    //         background-clip: text;
    //       }     }   }

    //   .rule-btn {
    //     position: absolute;
    //     top: 40rpx;
    //     right: 40rpx;
    //     display: flex;
    //     align-items: center;

    //     font-size: 28rpx;
    //     font-family: Source Han Sans CN;
    //     font-weight: 400;
    //     color: #ffffff;
    //

    //     .icon {
    //       width: 32rpx;
    //       height: 32rpx;
    //       margin-right: 8rpx;
    //     }   } }
    .common_bg {
    }

    .prize-card {
      margin: 30rpx auto 0;
      height: 380rpx;
      box-sizing: border-box;
      display: flex;
      border-top: 4rpx solid #000;
      position: relative;

      &::before {
        content: '';
        display: block;
        width: 4rpx;
        height: 300rpx;
        background: #000;
        left: 0;
        top: 0;
      }

      &::after {
        content: '';
        display: block;
        width: 4rpx;
        height: 300rpx;
        background: #000;
        left: 0;
        right: 0;
      }

      .prize-list {
        white-space: nowrap;
        width: calc(100% - 90rpx);
        .prize-item {
          .lv {
          }
          .prize {
          }
          .line {
          }
          .get-btn {
          }
        }
      }
      .out {
      }

      .prize-item {
        display: inline-flex;
        flex-flow: column nowrap;
        align-items: center;
        width: 90rpx;
        box-sizing: border-box;

        .lv {
          width: 100%;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 4rpx solid #000;
          border-bottom: 4rpx solid #000;
          box-sizing: border-box;

          font-family: 光良酒-干杯体, 光良酒-干杯体;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }

        .prize {
          // background: rgba(208, 209, 255, 0.1);
          width: 100%;
          height: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border-right: 4rpx solid #000;
          border-bottom: 4rpx solid #000;
          box-sizing: border-box;

          .pic {
            width: 70rpx;
            height: 70rpx;
          }
        }

        .prize {
        }

        .btn-box {
          width: 100%;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          .get-btn {
            width: 80rpx;
            height: 36rpx;
            background: #e40d1d;
            border-radius: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #ffffff;
          }
        }

        &.out {
          .lv {
            text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
          }

          .prize {
            flex-flow: column nowrap;
            background: none;

            .l-title {
              font-family: 光良酒-干杯体, 光良酒-干杯体;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
              text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000,
                0 0 2px #000;
            }

            image {
              width: 80rpx;
              height: 80rpx;
            }
          }

          .line {
            // background: none;
          }
        }

        &.act {
          border-image: linear-gradient(0deg, #6adeff, #7ab5ff, #ff7feb) 1 1;
        }
      }
      .prize-item {
        .lv {
        }
        .prize1 {
        }
        .line {
        }
        .prize2 {
        }
        .get-btn {
        }
      }
    }
  }
  .c_bg {
  }

  .task {
    margin: 30rpx auto 0;
    width: 690rpx;
    background: #222222;
    border: 4rpx solid #e40d1d;
    box-sizing: border-box;
    padding: 0 30rpx 20rpx;

    .task-tab {
      display: flex;
      padding: 30rpx 0;

      .task-tab-item {
        display: inline-flex;
        align-items: center;
        margin-right: 40rpx;
        position: relative;
        padding: 0 0 10rpx;

        font-family: 光良酒-干杯体, 光良酒-干杯体;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);

        &.act {
          color: #e40d1d;

          &::after {
            content: '';
            display: block;
            width: 36rpx;
            height: 4rpx;
            background: #e40d1d;
            border-radius: 304rpx 304rpx 304rpx 304rpx;
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
          }
        }

        &:last-child {
          margin-right: 40rpx;
        }
      }
    }

    .task-item {
      padding: 20rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .task-l {
        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }

        .num {
          margin: 4rpx 0;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #ffffff;
        }

        .progress {
          display: flex;
          align-items: center;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 20rpx;
          color: #ffffff;

          .progress-inner {
            width: 300rpx;
            margin-right: 6rpx;

            /deep/.cmd-progress-inner {
              background: #333333;
            }
          }
        }
      }

      .task-r {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-left: 30rpx;

        .btn {
          width: 120rpx;
          height: 48rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          filter: grayscale(1);

          font-family: 光良酒-干杯体, 光良酒-干杯体;
          font-weight: 400;
          font-size: 20rpx;
          color: #000000;
          text-shadow: 0 0 1px #ffffff, 0 0 1px #ffffff, 0 0 1px #ffffff,
            0 0 1px #ffffff;

          &.act {
            filter: grayscale(0);
          }
        }
      }
    }
  }

  .detail-pop {
    width: 600rpx;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 1rpx 30rpx 30rpx;

    .icon {
    }

    .title {
      margin-top: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      font-family: 光良酒-干杯体, 光良酒-干杯体;
      font-weight: 400;
      font-size: 32rpx;
      color: #ffffff;
      text-shadow: 0 0 2px #000000, 0 0 2px #000000, 0 0 2px #000000,
        0 0 2px #000000;

      // &.act {
      //   text {
      //     font-size: 32rpx;
      //     font-family: Source Han Sans CN;
      //     font-weight: 400;
      //     color: transparent;

      //     background: linear-gradient(
      //       90deg,
      //       #6adeff 0%,
      //       #7ab5ff 50%,
      //       #ff7feb 100%
      //     );
      //     background-clip: text;
      //   }
      // }
    }
    .common_bg {
    }

    .prize-desc {
      margin-top: 20rpx;
      text-align: center;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;

      view + view {
        margin-top: 10rpx;
      }
    }

    .jiang-list {
      width: auto;
      max-width: 100%;
      white-space: nowrap;
      margin-top: 40rpx;
      // width: 500rpx;

      .jiang-item {
        width: 160rpx;
        display: inline-block;
        margin-left: 30rpx;

        &:first-child {
          margin-left: 0;
        }

        .pic {
          width: 100%;
          height: 160rpx;
          background: #ffffff;
          border: 4rpx solid #000000;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          overflow: hidden;

          image {
            width: 120rpx;
            height: 120rpx;
          }

          .num {
            padding: 0 14rpx;
            height: 32rpx;
            display: flex;
            align-items: center;
            background: rgba(0, 0, 0, 0.7);
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            border-radius: 0 10rpx 0 0;

            font-size: 20rpx;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
          }
        }
        .hang1 {
        }

        .item-title {
          width: 100%;
          margin-top: 10rpx;
          text-align: center;

          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
        }
      }
    }

    // .border {
    //   margin-top: 40rpx;

    //   width: 570rpx;
    //   height: 1rpx;
    //   background: #666666;
    // }

    .close {
      width: 196rpx;
      height: 78rpx;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 150%);
    }

    .title {
    }
    .act {
    }

    .prize-desc {
    }
    .jiang-list {
      .jiang-item {
        .pic {
          .num {
          }
        }
        .item-title {
        }
        .hang1 {
        }
      }
    }
  }
  .common_bg {
  }

  .res-pop {
    position: relative;

    .suc-list {
      padding: 1rpx 0 0;

      .suc-title {
        width: 362rpx;
        height: 63rpx;
        margin: 0 auto;
      }

      .list-wrap {
        max-height: 700rpx;
        margin-top: 50rpx;

        .list-item {
          width: 690rpx;
          box-sizing: border-box;
          padding: 40rpx 30rpx 40rpx 10rpx;
          display: flex;
          align-items: center;
          margin: 0 auto 20rpx;

          .money {
            width: 160rpx;
            text-align: center;
            // background: #f00;

            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #ffffff;

            text {
              font-size: 34rpx;
            }
          }

          .info {
            flex: 1;
            padding-left: 20rpx;

            .title {
              max-width: 400rpx;

              font-size: 32rpx;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }

            .time {
              margin-top: 20rpx;

              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 22rpx;
              color: #cccccc;
            }
          }

          .btn {
            width: 132rpx;
            height: 52rpx;
          }

          .pic {
            width: 100rpx;
            height: 100rpx;
            margin: 0 30rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
          .info {
            .title {
            }
            .hang1 {
            }
          }
        }
        .common_bg {
        }
      }

      .list-num {
        text-align: center;

        font-size: 32rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;

        text {
          color: #d0d1ff;
        }
      }
    }

    .close {
      width: 196rpx;
      height: 78rpx;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 200%);
    }
    .icon {
    }
  }
}
</style>
